<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>复选checkbox</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html" />
        <label for="html">HTML</label>

        <input type="checkbox" v-model="checked" value="js" id="js" />
        <label for="js">JavaScript</label>

        <input type="checkbox" v-model="checked" value="css" id="css" />
        <label for="css">CSS</label>

        <p>您的选择是：{{ checked }}</p>
    </div>
</body>

<script type="text/javascript">
    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data: {
            checked: ["js"]
        }
    })
</script>

</html>